<template>
	<div class="register">
		<div class="applationName flex align-center justify-around">蒋家图书管理系统</div>
		
		<div class="userInfo flex align-center marginAuto justify-between">
			账号： <el-input style="width: 300px;" v-model="userInfo.user" placeholder="请输入账号"></el-input>
		</div>
		<div class="userInfo flex align-center marginAuto justify-between" style="margin-top: 20px;">
			密码： <el-input show-password style="width: 300px;" v-model="userInfo.password" placeholder="请输入密码"></el-input>
		</div>
		<div class="userInfo flex align-center marginAuto justify-between" style="margin-top: 20px;">
			确认密码： <el-input show-password style="width: 300px;" v-model="userInfo.passwordAgain" placeholder="请输入密码"></el-input>
		</div>
		<div class="flex align-center marginAuto justify-around">
			<el-button @click="submit" class="userInfo" type="primary" style="color: #FFFFFF;">登录</el-button>
		</div>
		
	</div>
</template>

<script>
	export default{
		name: 'register',
		data(){
			return{
				userInfo: {}
			}
		},
		methods: {
			submit(){
				if(!this.userInfo.user){
					this.$message.error('请输入账号')
					return
				}
				if(!this.userInfo.password){
					this.$message.error('请输入密码')
					return
				}
				if(!this.userInfo.passwordAgain){
					this.$message.error('请重新输入密码')
					return
				}
				if(this.userInfo.passwordAgain != this.userInfo.password){
					this.$message.error('密码输入不一致')
					return
				}
				console.log(this.userInfo,'==userInfo');
			}
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.register{
		overflow: hidden;
		.applationName{
			margin-top: 120px;
			color: #333;
			font-size: 39px;
		}
		.userInfo{
			width: 430px;
			color: gray;
			font-size: 22px;
			margin-top: 100px;
		}
	}
</style>
